<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code Quality Checker</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      ol {
        list-style: none;
      }
      .header {
        padding: 0 10%;
        height: 254px;
        background-color: #55aa68;
        display: flex;
        flex-direction: column;
      }
      .nav {
        margin-top: 31px;
        font-size: 14px;
        text-align: right;
      }
      .nav a {
        color: #fff;
        padding: 0 8px;
      }

      .hd-title {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .hd-title-txt {
        font-size: 50px;
        color: #fff;
        padding: 20px 0;
        margin-top: 20px;
      }
      .hd-title-remark {
        font-size: 18px;
        color: rgb(247, 247, 247);
      }

      .mbox {
        margin: 20px 10% 0 10%;
      }

      .statement {
        display: flex;
        flex-direction: row;
      }
      .sm-area {
        flex: 0 1 auto;
        width: 50%;
      }
      .total-table {
        margin: 20px 0;
      }
      .total-table-sty {
        width: 100%;
        border: 1px solid rgb(206, 206, 206);
      }
      .total-table-sty thead {
        background-color: rgb(206, 206, 206);
        line-height: 30px;
      }
      .total-table-sty td {
        text-indent: 10px;
        font-size: 14px;
        width: 25%;
      }
      .file-lst {
        font-size: 24px;
        border-bottom: 1px solid rgb(192, 192, 192);
        color: rgb(192, 192, 192);
        margin-bottom: 20px;
        padding: 10px 0;
      }
      .fl-item-lst {
      }
      .fl-item {
        display: flex;
        flex-direction: row;
      }
      .fl-item-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        width: 46px;
        height: 46px;
        line-height: 46px;
        background-color: rgb(202, 202, 202);
        color: #fff;
      }
      .fl-item-details {
        padding-left: 10px;
      }
      .fl-detail {
        padding: 15px;
        background-color: #f4f2f0;
        margin-top: 15px;
        margin-bottom: 25px;
      }

      .fl-detail {
        display: flex;
      }
      .fld-num {
        flex: 0 1 auto;
        display: flex;
      }
      .num-item {
        flex: 0 1 auto;
        border-right: 2px solid #444;
        margin-right: 10px;
        padding-right: 4px;
        font-family: 'Courier New', Courier, Monospace;
        font-size: 14px;
      }
      .num-item p {
        line-height: 20px;
        text-align: right;
      }
      .fld-con {
        line-height: 20px;
        font-size: 14px;
        overflow-x: auto;
      }
      .fld-skipped span {
        background-color: #999;
        padding: 2px 8px;
        display: inline-block;
        font-size: 12px;
        color: #fff;
        margin-right: 10px;
        min-width: 76px;
        text-align: center;
      }
      .fs-li {
        display: flex;
        align-items: center;
        margin: 8px 0;
      }

      .top {
        width: 40px;
        height: 40px;
        background-color: rgba(51, 51, 51, 0.8);
        color: #fff;
        position: fixed;
        right: 10px;
        bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .top::before {
        display: inline-block;
        border-top: 2px solid;
        border-right: 2px solid;
        width: 10px;
        height: 10px;
        border-color: #fff;
        transform: rotate(-45deg);
        margin-top: 5px;
        content: ' ';
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="nav">
        <span><a href="./index.html">重复率</a></span>
        <span><a href="./eslint.html">Eslint</a></span>
        <span><a href="./sloc.html">注解率及行数</a></span>
      </div>
      <div class="hd-title">
        <div class="hd-title-txt">Code Quality Checker</div>
        <div class="hd-title-remark">javascript代码检测工具</div>
      </div>
    </div>

    <div class="mbox">
      <aside class="statement">
        <div class="sm-area">
          <div id="sm-area-1" style="width: 100%; height: 400px;"></div>
          <script type="text/javascript">
            (function () {
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('sm-area-1'));

              // 指定图表的配置项和数据
              var option = {
                title: {
                  text: 'Copy/Paste report',
                  subtext: '',
                  x: 'center',
                  y: 'top',
                },
                legend: {
                  orient: 'vertical',
                  x: 'left',
                  y: 'center',
                  data: ['Total', 'Copy/Paste'],
                },
                calculable: false,
                series: (function () {
                  var series = [];
                  for (var i = 0; i < 30; i++) {
                    series.push({
                      // name: '浏览器（数据纯属虚构）',
                      type: 'pie',
                      radius: '70%',
                      center: ['60%', '50%'],
                      itemStyle: {
                        normal: {
                          label: { show: i > 28 },
                          labelLine: { show: i > 28, length: 20 },
                        },
                      },
                      radius: [i * 4 + 40, i * 4 + 43],
                      data: [
                        { value: i * 16 + <%=iTotals%>, name: 'Total' },
                        { value: i * 8 + <%=iDuplicatedLines%>, name: 'Copy/Paste' },
                      ],
                    });
                  }
                  series[0].markPoint = {
                    symbol: 'emptyCircle',
                    symbolSize: series[0].radius[0],
                    effect: {
                      show: true,
                      scaleSize: 12,
                      color: 'rgba(250,225,50,0.8)',
                      shadowBlur: 10,
                      period: 30,
                    },
                    data: [{ x: '60%', y: '50%' }],
                  };
                  return series;
                })(),
              };

              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);
            })();
          </script>
        </div>

        <div class="sm-area">
          <div id="sm-area-2" style="width: 100%; height: 400px;"></div>

          <script>
            (function () {
              // 基于准备好的dom，初始化echarts实例
              var myChart2 = echarts.init(document.getElementById('sm-area-2'));

              // 指定图表的配置项和数据

              var option2 = {
                title: {
                  text: 'Formats',
                  x: 'center',
                },
                legend: {
                  orient: 'vertical',
                  x: 'left',
                  y: 'center',
                  data: <%-JSON.stringify(aFormats)%>,
                },
                series: [
                  {
                    type: 'pie',
                    radius: '70%',
                    center: ['60%', '50%'],
                    data: <%-JSON.stringify(aSeriesData)%>,
                  },
                ],
              };

              // 使用刚指定的配置项和数据显示图表。
              myChart2.setOption(option2);
            })();
          </script>
        </div>
      </aside>

      <aside class="total-table">
        <table class="total-table-sty">
          <thead>
            <tr>
              <td>扫描文件数量</td>
              <td>总行数</td>
              <td>重复项</td>
              <td>占比</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><%=iMacthFiles%></td>
              <td><%=iTotals%></td>
              <td><%=iDuplicatedLines%></td>
              <td>
                <%=Math.round((iDuplicatedLines/iTotals).toFixed(2)*100)%>%
              </td>
            </tr>
          </tbody>
        </table>
      </aside>

      <article>
        <div class="file-lst">Capture</div>

        <div class="fl-item-lst">

          <% Object.keys(oCompuateEventDatas).forEach(function(sKey){ %>
            <% oCompuateEventDatas[sKey].forEach(function(oItem){ %>
          <div>
            <dl class="fl-item">
              <dt class="fl-item-btn">+</dt>
              <dd class="fl-item-details">
                <div>
                  <%=oItem['duplicationA']['sourceId'].replace(sRootPath, "")%> [<%=oItem['duplicationA']['start']['line']+":"+oItem['duplicationA']['start']['column']%>
                  - <%=oItem['duplicationA']['end']['line']+":"+oItem['duplicationA']['end']['column']%>]
                </div>
                <div>
                  <%=oItem['duplicationB']['sourceId'].replace(sRootPath, "")%> [<%=oItem['duplicationB']['start']['line']+":"+oItem['duplicationB']['start']['column']%>
                  - <%=oItem['duplicationB']['end']['line']+":"+oItem['duplicationB']['end']['column']%>]
                </div>
              </dd>
            </dl>
            <div class="fl-detail">
              <aside class="fld-num">
                <div class="num-item">
                  <% for (let i = oItem['duplicationA']['start']['line']; i <= oItem['duplicationA']['end']['line']; i++){ %>
                  <p><%=i%></p>
                  <% } %>
                </div>
                <div class="num-item">
                  <% for (let i = oItem['duplicationB']['start']['line']; i <= (oItem['duplicationB']['start']['line']+oItem['duplicationA']['end']['line']-oItem['duplicationA']['start']['line']); i++){ %>
                    <p><%=i%></p>
                  <% } %>
                </div>
              </aside>

              <article class="fld-con">
                <pre><code id="msg"><%=oItem['duplicationA']['fragment']%></code></pre>
              </article>
            </div>
          </div>
            <% }); %>
          <% }); %>

        </div>

      </article>
    </div>
    <div
      class="top"
      id="top"
      onclick="document.body.scrollTop = document.documentElement.scrollTop=0"
    ></div>
  </body>
</html>
